<template>
  <div class="code-wrap">
    <div class="code-txt" @click="inputClick">
      <div v-show="code.length===0" class="gray-title">请输入验证码</div>
      <span v-for="item in 6" :key="item" :class="code.length >= item ? 'border-color' : ''">{{ code.slice(item-1,item) }}</span>
    </div>
    <input
      ref="input"
      class="input-content"
      maxlength="6"
      pattern="[0-9]*"
      type="tel"
      @input="codeInput"
    >
    <div
      :class="canGetCode ? (isCountDown ? 'code-btn code-light count-down' : 'code-btn code-light') : ('code-btn code-gray')"
      @click="getAuthCode"
    >{{ isCountDown ? `重发验证码 ${countNum}s` : '发送验证码' }}</div>
  </div>
</template>

<script>
import vant from 'vant'
import { sendAuthCodeAPI } from '@/axios/api/auth'
export default {
  props: {
    tel: {
      type: String,
      default: ''
    },
    canGetCode: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isCountDown: false,
      countNum: '',
      code: ''
    }
  },
  methods: {
    getAuthCode() {
      if (!this.canGetCode) return
      sendAuthCodeAPI({ phone: this.tel }).then(res => {
        vant.Toast('发送成功')
        this.$emit('sendSuccess')
      }).catch(res => {
        vant.Toast(res.data.detail || '发送失败')
      })
      if (!this.isCountDown) {
        this.isCountDown = true
        this.countDown()
      }
    },
     countDown() {
      this.countNum = 20
      const timer = setInterval(() => {
        if (this.countNum > 1) {
          this.countNum = this.countNum - 1
      } else {
          this.isCountDown = false
          this.countNum = 20
          clearInterval(timer)
        }
      }, 1000)
    },
    inputClick() {
      this.$refs.input.focus()
    },
    codeInput(e) {
      this.code = e.target.value.replace(/\s*/g, '')
      this.$emit('codeInput',
        {
          value: this.code
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.code-wrap {
  position: relative;
  padding-top: 16px;
  height: 48px;
  width: calc(100% - 100px);

  .code-txt {
    display: flex;
    position: relative;
    .gray-title {
      position: absolute;
      width: 100px;
      height: 21px;
      line-height: 21px;
      font-size: 15px;
      font-weight: 500;
      color: #C6C9CC;
    }
    span {
      margin-right: 12px;
      width: 24px;
      height: 33px;
      line-height: 33px;
      text-align: center;

      border-bottom: 1px solid #F1F2F3;
    }
    .border-color {
      border-bottom: 1px solid #141E2A !important;
    }
  }

  .input-content {

    position: absolute;
    z-index: -1;
    top:0;
    left: 0;
    height: 46px;

    text-indent: -999em; // 隐藏input文字
    margin-left: -100%;// 隐藏input光标
    text-shadow:0 0 0 red;
    color:transparent;
    background: transparent !important;
  }
  .code-btn {
    position: absolute;
    top: 16px;
    right: -100px;
    width: 100px;
    height: 32px;
    line-height: 32px;
    font-size: 13px;
    text-align: center;
    color: #c6c9cc;
    border-radius: 16px;
    border: 1px solid #f1f2f3;
  }
  .code-light {
    color: #267eff;
    border-color: #267eff;
  }
  .code-gray {
    color: #c6c9cc;
    border-color: #f1f2f3;
  }
  .count-down {
    color: #707070 !important;
    border: none !important;
  }
}
</style>
